<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title> Homepage 3 | Nyasa - Responsive admin template.</title>
        <link rel="shortcut icon" href="img/favicon.ico">
        <!--STYLESHEET-->
        <!--=================================================-->
        <!--Roboto Slab Font [ OPTIONAL ] -->
        <link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,300,100,700" rel="stylesheet">
        <link href="http://fonts.googleapis.com/css?family=Roboto:500,400italic,100,700italic,300,700,500italic,400" rel="stylesheet">
        <!--Bootstrap Stylesheet [ REQUIRED ]-->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <!--Jasmine Stylesheet [ REQUIRED ]-->
        <link href="css/style.css" rel="stylesheet">
        <!--Font Awesome [ OPTIONAL ]-->
        <link href="plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
        <!--Switchery [ OPTIONAL ]-->
        <link href="plugins/switchery/switchery.min.css" rel="stylesheet">
        <!--Switchery [ OPTIONAL ]-->
        <link href="plugins/jvectormap/jquery-jvectormap.css" rel="stylesheet">
        <!--Bootstrap Select [ OPTIONAL ]-->
        <link href="plugins/bootstrap-select/bootstrap-select.min.css" rel="stylesheet">
        <!--Bootstrap Validator [ OPTIONAL ]-->
        <link href="plugins/bootstrap-validator/bootstrapValidator.min.css" rel="stylesheet">
        <!--Demo [ DEMONSTRATION ]-->
        <link href="css/demo/jquery-steps.min.css" rel="stylesheet">
        <!--Demo [ DEMONSTRATION ]-->
        <link href="css/demo/jasmine.css" rel="stylesheet">
        <!--SCRIPT-->
        <!--=================================================-->
        <!--Page Load Progress Bar [ OPTIONAL ]-->
        <link href="plugins/pace/pace.min.css" rel="stylesheet">
        <script src="plugins/pace/pace.min.js"></script>
    </head>
    <!--TIPS-->
    <!--You may remove all ID or Class names which contain "demo-", they are only used for demonstration. -->
    <body>
        <div id="container" class="effect mainnav-lg navbar-fixed mainnav-fixed">
            <!--NAVBAR-->
            <!--===================================================-->
            <header id="navbar">
                <div id="navbar-container" class="boxed">
                    <!--Brand logo & name-->
                    <!--================================-->
                    <div class="navbar-header">
                        <a href="index.html" class="navbar-brand">
                            <i class="fa fa-cube brand-icon"></i>
                            <div class="brand-title">
                                <span class="brand-text">Nyasa</span>
                            </div>
                        </a>
                    </div>
                    <!--================================-->
                    <!--End brand logo & name-->
                    <!--Navbar Dropdown-->
                    <!--================================-->
                    <div class="navbar-content clearfix">
                        <ul class="nav navbar-top-links pull-left">
                            <!--Navigation toogle button-->
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <li class="tgl-menu-btn">
                                <a class="mainnav-toggle" href="dashboard-v3.html#"> <i class="fa fa-navicon fa-lg"></i> </a>
                            </li>
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <!--End Navigation toogle button-->
                            <!--Profile toogle button-->
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <li id="profilebtn" class="hidden-xs">
                                <a href="JavaScript:void(0);"> <i class="fa fa-user fa-lg"></i> </a>
                            </li>
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <!--End Profile toogle button-->
                            <!--Messages Dropdown-->
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <li class="dropdown">
                                <a href="dashboard-v3.html#" data-toggle="dropdown" class="dropdown-toggle"> <i class="fa fa-envelope fa-lg"></i> <span class="badge badge-header badge-warning">9</span> 
                                </a>
                                <!--Message dropdown menu-->
                                <div class="dropdown-menu dropdown-menu-md with-arrow">
                                    <div class="pad-all bord-btm">
                                        <div class="h4 text-muted text-thin mar-no">You have 3 messages.</div>
                                    </div>
                                    <div class="nano scrollable">
                                        <div class="nano-content">
                                            <ul class="head-list">
                                                <!-- Dropdown list-->
                                                <li>
                                                    <a href="dashboard-v3.html#" class="media">
                                                        <div class="media-left"> <img src="img/av2.png" alt="Profile Picture" class="img-circle img-sm"> </div>
                                                        <div class="media-body">
                                                            <div class="text-nowrap">Andy sent you a message</div>
                                                            <small class="text-muted">15 minutes ago</small> 
                                                        </div>
                                                    </a>
                                                </li>
                                                <!-- Dropdown list-->
                                                <li>
                                                    <a href="dashboard-v3.html#" class="media">
                                                        <div class="media-left"> <img src="img/av4.png" alt="Profile Picture" class="img-circle img-sm"> </div>
                                                        <div class="media-body">
                                                            <div class="text-nowrap">Lucy sent you a message</div>
                                                            <small class="text-muted">30 minutes ago</small> 
                                                        </div>
                                                    </a>
                                                </li>
                                                <!-- Dropdown list-->
                                                <li>
                                                    <a href="dashboard-v3.html#" class="media">
                                                        <div class="media-left"> <img src="img/av3.png" alt="Profile Picture" class="img-circle img-sm"> </div>
                                                        <div class="media-body">
                                                            <div class="text-nowrap">Jackson sent you a message</div>
                                                            <small class="text-muted">40 minutes ago</small> 
                                                        </div>
                                                    </a>
                                                </li>
                                                <!-- Dropdown list-->
                                                <li>
                                                    <a href="dashboard-v3.html#" class="media">
                                                        <div class="media-left"> <img src="img/av6.png" alt="Profile Picture" class="img-circle img-sm"> </div>
                                                        <div class="media-body">
                                                            <div class="text-nowrap">Donna sent you a message</div>
                                                            <small class="text-muted">5 hours ago</small> 
                                                        </div>
                                                    </a>
                                                </li>
                                                <!-- Dropdown list-->
                                                <li>
                                                    <a href="dashboard-v3.html#" class="media">
                                                        <div class="media-left"> <img src="img/av4.png" alt="Profile Picture" class="img-circle img-sm"> </div>
                                                        <div class="media-body">
                                                            <div class="text-nowrap">Lucy sent you a message</div>
                                                            <small class="text-muted">Yesterday</small> 
                                                        </div>
                                                    </a>
                                                </li>
                                                <!-- Dropdown list-->
                                                <li>
                                                    <a href="dashboard-v3.html#" class="media">
                                                        <div class="media-left"> <img src="img/av3.png" alt="Profile Picture" class="img-circle img-sm"> </div>
                                                        <div class="media-body">
                                                            <div class="text-nowrap">Jackson sent you a message</div>
                                                            <small class="text-muted">Yesterday</small> 
                                                        </div>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <!--Dropdown footer-->
                                    <div class="pad-all bord-top">
                                        <a href="dashboard-v3.html#" class="btn-link text-dark box-block"> <i class="fa fa-angle-right fa-lg pull-right"></i>Show All Messages </a>
                                    </div>
                                </div>
                            </li>
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <!--End message dropdown-->
                            <!--Notification dropdown-->
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <li class="dropdown">
                                <a href="dashboard-v3.html#" data-toggle="dropdown" class="dropdown-toggle"> <i class="fa fa-bell fa-lg"></i> <span class="badge badge-header badge-danger">5</span> </a>
                                <!--Notification dropdown menu-->
                                <div class="dropdown-menu dropdown-menu-md with-arrow">
                                    <div class="pad-all bord-btm">
                                        <div class="h4 text-muted text-thin mar-no"> Notification </div>
                                    </div>
                                    <div class="nano scrollable">
                                        <div class="nano-content">
                                            <ul class="head-list">
                                                <!-- Dropdown list-->
                                                <li>
                                                    <a href="dashboard-v3.html#" class="media">
                                                        <div class="media-left"> <span class="icon-wrap icon-circle bg-primary"> <i class="fa fa-comment fa-lg"></i> </span> </div>
                                                        <div class="media-body">
                                                            <div class="text-nowrap">New comments waiting approval</div>
                                                            <small class="text-muted">15 minutes ago</small> 
                                                        </div>
                                                    </a>
                                                </li>
                                                <!-- Dropdown list-->
                                                <li>
                                                    <a href="dashboard-v3.html#" class="media">
                                                        <span class="badge badge-success pull-right">90%</span>
                                                        <div class="media-left"> <span class="icon-wrap icon-circle bg-danger"> <i class="fa fa-hdd-o fa-lg"></i> </span> </div>
                                                        <div class="media-body">
                                                            <div class="text-nowrap">HDD is full</div>
                                                            <small class="text-muted">50 minutes ago</small> 
                                                        </div>
                                                    </a>
                                                </li>
                                                <!-- Dropdown list-->
                                                <li>
                                                    <a href="dashboard-v3.html#" class="media">
                                                        <div class="media-left"> <span class="icon-wrap icon-circle bg-info"> <i class="fa fa-file-word-o fa-lg"></i> </span> </div>
                                                        <div class="media-body">
                                                            <div class="text-nowrap">Write a news article</div>
                                                            <small class="text-muted">Last Update 8 hours ago</small> 
                                                        </div>
                                                    </a>
                                                </li>
                                                <!-- Dropdown list-->
                                                <li>
                                                    <a href="dashboard-v3.html#" class="media">
                                                        <span class="label label-danger pull-right">New</span>
                                                        <div class="media-left"> <span class="icon-wrap icon-circle bg-purple"> <i class="fa fa-comment fa-lg"></i> </span> </div>
                                                        <div class="media-body">
                                                            <div class="text-nowrap">Comment Sorting</div>
                                                            <small class="text-muted">Last Update 8 hours ago</small> 
                                                        </div>
                                                    </a>
                                                </li>
                                                <!-- Dropdown list-->
                                                <li>
                                                    <a href="dashboard-v3.html#" class="media">
                                                        <div class="media-left"> <span class="icon-wrap icon-circle bg-success"> <i class="fa fa-user fa-lg"></i> </span> </div>
                                                        <div class="media-body">
                                                            <div class="text-nowrap">New User Registered</div>
                                                            <small class="text-muted">4 minutes ago</small> 
                                                        </div>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <!--Dropdown footer-->
                                    <div class="pad-all bord-top">
                                        <a href="dashboard-v3.html#" class="btn-link text-dark box-block"> <i class="fa fa-angle-right fa-lg pull-right"></i>Show All Notifications </a>
                                    </div>
                                </div>
                            </li>
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <!--End notifications dropdown-->
                        </ul>
                        <ul class="nav navbar-top-links pull-right">
                            <!--Profile toogle button-->
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <li class="hidden-xs" id="toggleFullscreen">
                                <a class="fa fa-expand" data-toggle="fullscreen" href="dashboard-v3.html#" role="button">
                                <span class="sr-only">Toggle fullscreen</span>
                                </a>
                            </li>
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <!--End Profile toogle button-->
                            <!--User dropdown-->
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <li id="dropdown-user" class="dropdown">
                                <a href="dashboard-v3.html#" data-toggle="dropdown" class="dropdown-toggle text-right">
                                    <span class="pull-right"> <img class="img-circle img-user media-object" src="img/av1.png" alt="Profile Picture"> </span>
                                    <div class="username hidden-xs">John Doe</div>
                                </a>
                                <div class="dropdown-menu dropdown-menu-right with-arrow">
                                    <!-- User dropdown menu -->
                                    <ul class="head-list">
                                        <li>
                                            <a href="dashboard-v3.html#"> <i class="fa fa-user fa-fw"></i> Profile </a>
                                        </li>
                                        <li>
                                            <a href="dashboard-v3.html#">  <i class="fa fa-envelope fa-fw"></i> Messages </a>
                                        </li>
                                        <li>
                                            <a href="dashboard-v3.html#">  <i class="fa fa-gear fa-fw"></i> Settings </a>
                                        </li>
                                        <li>
                                            <a href="dashboard-v3.html#"> <i class="fa fa-sign-out fa-fw"></i> Logout </a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <!--End user dropdown-->
                            <!--Navigation toogle button-->
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <li class="hidden-xs">
                                <a id="demo-toggle-aside" href="dashboard-v3.html#">
                                <i class="fa fa-navicon fa-lg"></i>
                                </a>
                            </li>
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <!--End Navigation toogle button-->
                        </ul>
                    </div>
                    <!--================================-->
                    <!--End Navbar Dropdown-->
                </div>
            </header>
            <!--===================================================-->
            <!--END NAVBAR-->
            <div class="boxed">
                <!--CONTENT CONTAINER-->
                <!--===================================================-->
                <div id="content-container">
                    <div id="profilebody">
                        <div class="pad-all animated fadeInDown">
                            <div class="row">
                                <div class="col-lg-2 col-sm-6 col-md-6 col-xs-12">
                                    <div class="panel panel-default mar-no">
                                        <div class="panel-body">
                                            <a href="JavaScript:void(0);">
                                                <div class="pull-left">
                                                    <p class="profile-title text-bricky">Users</p>
                                                </div>
                                                <div class="pull-right text-bricky"> <i class="fa fa-users fa-4x"></i> </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-2 col-sm-6 col-md-6 col-xs-12">
                                    <div class="panel panel-default mar-no">
                                        <div class="panel-body">
                                            <a href="JavaScript:void(0);">
                                                <div class="pull-left">
                                                    <p class="profile-title text-bricky">Inbox</p>
                                                </div>
                                                <div class="pull-right text-bricky"> <i class="fa fa-envelope fa-4x"></i> </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-2 col-sm-6 col-md-6 col-xs-12">
                                    <div class="panel panel-default mar-no">
                                        <div class="panel-body">
                                            <a href="JavaScript:void(0);">
                                                <div class="pull-left">
                                                    <p class="profile-title text-bricky">FAQ</p>
                                                </div>
                                                <div class="pull-right text-bricky"> <i class="fa fa-headphones fa-4x"></i> </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-2 col-sm-6 col-md-6 col-xs-12">
                                    <div class="panel panel-default mar-no">
                                        <div class="panel-body">
                                            <a href="JavaScript:void(0);">
                                                <div class="pull-left">
                                                    <p class="profile-title text-bricky">Settings</p>
                                                </div>
                                                <div class="pull-right text-bricky"> <i class="fa fa-cogs fa-4x"></i> </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-2 col-sm-6 col-md-6 col-xs-12">
                                    <div class="panel panel-default mar-no">
                                        <div class="panel-body">
                                            <a href="JavaScript:void(0);">
                                                <div class="pull-left">
                                                    <p class="profile-title text-bricky">Calender</p>
                                                </div>
                                                <div class="pull-right text-bricky"> <i class="fa fa-calendar fa-4x"></i> </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-2 col-sm-6 col-md-6 col-xs-12">
                                    <div class="panel panel-default mar-no">
                                        <div class="panel-body">
                                            <a href="JavaScript:void(0);">
                                                <div class="pull-left">
                                                    <p class="profile-title text-bricky">Pictures</p>
                                                </div>
                                                <div class="pull-right text-bricky"> <i class="fa fa-picture-o fa-4x"></i> </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--Page content-->
                    <!--===================================================-->
                    <div id="page-content">
                        <div class="row">
                            <div class="col-lg-3 col-md-3 col-sm-6 col-xm-12">
                                <!--Registered User-->
                                <div class="panel media pad-all">
                                    <div class="media-left">
                                        <span class="icon-wrap icon-wrap-sm icon-circle bg-success">
                                        <i class="fa fa-user fa-2x"></i>
                                        </span>
                                    </div>
                                    <div class="media-body">
                                        <p class="text-2x mar-no text-thin text-right">241</p>
                                        <p class="h5 mar-no text-right">Registered User</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-6 col-xm-12">
                                <!--New Order-->
                                <div class="panel media pad-all">
                                    <div class="media-left">
                                        <span class="icon-wrap icon-wrap-sm icon-circle bg-info">
                                        <i class="fa fa-shopping-cart fa-2x"></i>
                                        </span>
                                    </div>
                                    <div class="media-body">
                                        <p class="text-2x mar-no text-thin text-right">543</p>
                                        <p class="h5 mar-no text-right">New Order</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-6 col-xm-12">
                                <!--Comments-->
                                <div class="panel media pad-all">
                                    <div class="media-left">
                                        <span class="icon-wrap icon-wrap-sm icon-circle bg-warning">
                                        <i class="fa fa-comment fa-2x"></i>
                                        </span>
                                    </div>
                                    <div class="media-body">
                                        <p class="text-2x mar-no text-thin text-right">34</p>
                                        <p class="h5 mar-no text-right">Comments</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-6 col-xm-12">
                                <!--Sales-->
                                <div class="panel media pad-all">
                                    <div class="media-left">
                                        <span class="icon-wrap icon-wrap-sm icon-circle bg-danger">
                                        <i class="fa fa-dollar fa-2x"></i>
                                        </span>
                                    </div>
                                    <div class="media-body">
                                        <p class="text-2x mar-no text-thin text-right">654</p>
                                        <p class="h5 mar-no text-right">Sales</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-8">
                                <div class="panel">
                                    <div class="panel-heading">
                                        <h3 class="panel-title"> Order Statistics </h3>
                                    </div>
                                    <div class="panel-body">
                                        <div class="col-md-8">
                                            <!-- World Map -->
                                            <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                                            <div id="world-map-markers" style="height: 300px"></div>
                                            <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                                        </div>
                                        <div class="col-md-4">
                                            <!-- Progress bars Start -->
                                            <div class="clearfix"> 
                                                <span class="pull-left">In Queue</span> 
                                                <small class="pull-right">45%</small> 
                                            </div>
                                            <div class="pad-btm">
                                                <div class="progress progress-striped progress-sm">
                                                    <div class="progress-bar progress-bar-info" style="width: 55%;"></div>
                                                </div>
                                            </div>
                                            <!-- Progress bars End -->                                
                                            <!-- Progress bars Start -->
                                            <div class="clearfix"> 
                                                <span class="pull-left">Shipped Products</span> 
                                                <small class="pull-right">350/500</small> 
                                            </div>
                                            <div class="pad-btm">
                                                <div class="progress progress-striped progress-sm">
                                                    <div class="progress-bar progress-bar-primary" style="width: 55%;"></div>
                                                </div>
                                            </div>
                                            <!-- Progress bars End -->                                
                                            <!-- Progress bars Start -->
                                            <div class="clearfix"> 
                                                <span class="pull-left">Returned Products</span> 
                                                <small class="pull-right">50/500</small> 
                                            </div>
                                            <div class="pad-btm">
                                                <div class="progress progress-striped progress-sm">
                                                    <div class="progress-bar progress-bar-warning" style="width: 55%;"></div>
                                                </div>
                                            </div>
                                            <!-- Progress bars End -->                                
                                            <!-- Progress bars Start -->
                                            <div class="clearfix"> 
                                                <span class="pull-left">Pending Deliveries</span> 
                                                <small class="pull-right">150/500</small> 
                                            </div>
                                            <div class="pad-btm">
                                                <div class="progress progress-striped progress-sm">
                                                    <div class="progress-bar progress-bar-danger" style="width: 55%;"></div>
                                                </div>
                                            </div>
                                            <!-- Progress bars End -->                                
                                            <!-- Progress bars Start -->
                                            <div class="clearfix"> 
                                                <span class="pull-left">Project 2</span> 
                                                <small class="pull-right">32%</small> 
                                            </div>
                                            <div class="pad-btm">
                                                <div class="progress progress-striped progress-sm">
                                                    <div class="progress-bar progress-bar-info" style="width: 55%;"></div>
                                                </div>
                                            </div>
                                            <!-- Progress bars End -->                                
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="panel">
                                    <div class="panel-heading">
                                        <h3 class="panel-title">Monthly Statistics <small> based on the User Activities </small></h3>
                                    </div>
                                    <div class="panel-body pad-no">
                                        <!--Default Accordion--> 
                                        <!--===================================================-->
                                        <div class="panel-group accordion mar-no" id="accordion1">
                                            <div class="panel defaultpanel">
                                                <!--Accordion title-->
                                                <div class="panel-heading">
                                                    <h4 class="panel-title"> <a data-parent="#accordion1" data-toggle="collapse" href="dashboard-v3.html#accordionOne"> <i class="fa fa-calendar"></i> This Month</a> 
                                                    </h4>
                                                </div>
                                                <!--Accordion content-->
                                                <div class="panel-collapse collapse in" id="accordionOne">
                                                    <div class="panel-body pad-no">
                                                        <table class="table mar-no bg-light-gray">
                                                            <tbody>
                                                                <tr>
                                                                    <td class="text-center">1</td>
                                                                    <td>Google Chrome</td>
                                                                    <td class="center">4909</td>
                                                                    <td><i class="fa fa-caret-down text-danger"></i></td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="text-center">2</td>
                                                                    <td>Google Chrome</td>
                                                                    <td class="center">4909</td>
                                                                    <td><i class="fa fa-caret-down text-danger"></i></td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="text-center">3</td>
                                                                    <td>Google Chrome</td>
                                                                    <td class="center">4909</td>
                                                                    <td><i class="fa fa-caret-down text-danger"></i></td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="text-center">4</td>
                                                                    <td>Google Chrome</td>
                                                                    <td class="center">4909</td>
                                                                    <td><i class="fa fa-caret-down text-danger"></i></td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="text-center">5</td>
                                                                    <td>Google Chrome</td>
                                                                    <td class="center">4909</td>
                                                                    <td><i class="fa fa-caret-down text-danger"></i></td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="panel defaultpanel">
                                                <!--Accordion title-->
                                                <div class="panel-heading">
                                                    <h4 class="panel-title"> <a data-parent="#accordion1" data-toggle="collapse" href="dashboard-v3.html#accordionTwo"> <i class="fa fa-calendar"></i> Last Month</a> </h4>
                                                </div>
                                                <!--Accordion content-->
                                                <div class="panel-collapse collapse" id="accordionTwo">
                                                    <div class="panel-body pad-no">
                                                        <table class="table mar-no bg-light-gray">
                                                            <tbody>
                                                                <tr>
                                                                    <td class="text-center">1</td>
                                                                    <td>Google Chrome</td>
                                                                    <td class="center">4909</td>
                                                                    <td><i class="fa fa-caret-down text-danger"></i></td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="text-center">2</td>
                                                                    <td>Google Chrome</td>
                                                                    <td class="center">4909</td>
                                                                    <td><i class="fa fa-caret-down text-danger"></i></td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="text-center">3</td>
                                                                    <td>Google Chrome</td>
                                                                    <td class="center">4909</td>
                                                                    <td><i class="fa fa-caret-down text-danger"></i></td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="text-center">4</td>
                                                                    <td>Google Chrome</td>
                                                                    <td class="center">4909</td>
                                                                    <td><i class="fa fa-caret-down text-danger"></i></td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="text-center">5</td>
                                                                    <td>Google Chrome</td>
                                                                    <td class="center">4909</td>
                                                                    <td><i class="fa fa-caret-down text-danger"></i></td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="panel defaultpanel">
                                                <!--Accordion title-->
                                                <div class="panel-heading">
                                                    <h4 class="panel-title"> <a data-parent="#accordion1" data-toggle="collapse" href="dashboard-v3.html#accordionThree"> <i class="fa fa-calendar"></i> Last Quarter</a> </h4>
                                                </div>
                                                <!--Accordion content-->
                                                <div class="panel-collapse collapse" id="accordionThree">
                                                    <div class="panel-body pad-no">
                                                        <table class="table mar-no bg-light-gray">
                                                            <tbody>
                                                                <tr>
                                                                    <td class="text-center">1</td>
                                                                    <td>Google Chrome</td>
                                                                    <td class="center">4909</td>
                                                                    <td><i class="fa fa-caret-down text-danger"></i></td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="text-center">2</td>
                                                                    <td>Google Chrome</td>
                                                                    <td class="center">4909</td>
                                                                    <td><i class="fa fa-caret-down text-danger"></i></td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="text-center">3</td>
                                                                    <td>Google Chrome</td>
                                                                    <td class="center">4909</td>
                                                                    <td><i class="fa fa-caret-down text-danger"></i></td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="text-center">4</td>
                                                                    <td>Google Chrome</td>
                                                                    <td class="center">4909</td>
                                                                    <td><i class="fa fa-caret-down text-danger"></i></td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="text-center">5</td>
                                                                    <td>Google Chrome</td>
                                                                    <td class="center">4909</td>
                                                                    <td><i class="fa fa-caret-down text-danger"></i></td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--===================================================--> 
                                        <!--End Default Accordion--> 
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-4">
                                <!--Panel with Header-->
                                <!--===================================================-->
                                <div class="panel">
                                    <div class="panel-body">
                                        <div class="carousel slide" id="c-slide" data-ride="carousel">
                                            <div class="carousel-inner">
                                                <div class="item active">
                                                    <div class="text-bold"> Task in Progress </div>
                                                    <div class="pad-ver-5"> Navigation Illustration </div>
                                                    <!-- Progress bars Start -->                                
                                                    <div class="pad-btm">
                                                        <div class="progress progress-striped progress-sm">
                                                            <div class="progress-bar progress-bar-info" style="width: 55%;"></div>
                                                        </div>
                                                    </div>
                                                    <!-- Progress bars End -->
                                                    <div class="eq-height">
                                                        <div class="text-dark"> Status : </div>
                                                        <div class="text-dark text-lg pull-left pad-ver-5"> Active </div>
                                                        <div class="text-dark pull-right"> 
                                                            <a href="dashboard-v3.html#" class="btn btn-info btn-sm"> 
                                                            <i class="fa fa-pause pad-rgt-5"></i> Pause 
                                                            </a> 
                                                            <a href="dashboard-v3.html#" class="btn btn-info btn-sm"> 
                                                            <i class="fa fa-check pad-rgt-5"></i> Complete 
                                                            </a> 
                                                        </div>
                                                    </div>
                                                    <hr>
                                                    <ul class="list-inline">
                                                        <li class="text-bold pull-left pad-ver-5"> Assigned to : </li>
                                                        <li class="pull-right"><img src="img/av1.png" class="img-rounded img-sm" alt=""></li>
                                                        <li class="pull-right"><img src="img/av1.png" class="img-rounded img-sm" alt=""></li>
                                                        <li class="pull-right"><img src="img/av1.png" class="img-rounded img-sm" alt=""></li>
                                                    </ul>
                                                </div>
                                                <div class="item">
                                                    <div class="text-bold"> Task in Progress </div>
                                                    <div class="pad-ver-5"> App Usability Testing </div>
                                                    <!-- Progress bars Start -->                                
                                                    <div class="pad-btm">
                                                        <div class="progress progress-striped progress-sm">
                                                            <div class="progress-bar progress-bar-info" style="width: 55%;"></div>
                                                        </div>
                                                    </div>
                                                    <!-- Progress bars End -->
                                                    <div class="eq-height">
                                                        <div class="text-dark"> Status : </div>
                                                        <div class="text-dark text-lg pull-left pad-ver-5"> Active </div>
                                                        <div class="text-dark pull-right"> 
                                                            <a href="dashboard-v3.html#" class="btn btn-info btn-sm"> 
                                                            <i class="fa fa-pause pad-rgt-5"></i> Pause 
                                                            </a> 
                                                            <a href="dashboard-v3.html#" class="btn btn-info btn-sm"> 
                                                            <i class="fa fa-check pad-rgt-5"></i> Complete 
                                                            </a> 
                                                        </div>
                                                    </div>
                                                    <hr>
                                                    <ul class="list-inline">
                                                        <li class="text-bold pull-left pad-ver-5"> Assigned to : </li>
                                                        <li class="pull-right"><img src="img/av1.png" class="img-rounded img-sm" alt=""></li>
                                                        <li class="pull-right"><img src="img/av1.png" class="img-rounded img-sm" alt=""></li>
                                                        <li class="pull-right"><img src="img/av1.png" class="img-rounded img-sm" alt=""></li>
                                                    </ul>
                                                </div>
                                                <div class="item">
                                                    <div class="text-bold"> Task in Progress </div>
                                                    <div class="pad-ver-5"> Web Portal Redesign </div>
                                                    <!-- Progress bars Start -->                                
                                                    <div class="pad-btm">
                                                        <div class="progress progress-striped progress-sm">
                                                            <div class="progress-bar progress-bar-info" style="width: 55%;"></div>
                                                        </div>
                                                    </div>
                                                    <!-- Progress bars End -->
                                                    <div class="eq-height">
                                                        <div class="text-dark"> Status : </div>
                                                        <div class="text-dark text-lg pull-left pad-ver-5"> Active </div>
                                                        <div class="text-dark pull-right"> 
                                                            <a href="dashboard-v3.html#" class="btn btn-info btn-sm"> 
                                                            <i class="fa fa-pause pad-rgt-5"></i> Pause 
                                                            </a> 
                                                            <a href="dashboard-v3.html#" class="btn btn-info btn-sm"> 
                                                            <i class="fa fa-check pad-rgt-5"></i> Complete 
                                                            </a> 
                                                        </div>
                                                    </div>
                                                    <hr>
                                                    <ul class="list-inline">
                                                        <li class="text-bold pull-left pad-ver-5"> Assigned to : </li>
                                                        <li class="pull-right"><img src="img/av1.png" class="img-rounded img-sm" alt=""></li>
                                                        <li class="pull-right"><img src="img/av1.png" class="img-rounded img-sm" alt=""></li>
                                                        <li class="pull-right"><img src="img/av1.png" class="img-rounded img-sm" alt=""></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--===================================================-->
                                <!--End Panel with Header-->
                            </div>
                            <div class="col-lg-4">
                                <div class="panel">
                                    <div class="panel-heading">
                                        <h3 class="panel-title"> Sales Statistics </h3>
                                    </div>
                                    <div class="panel-body">
                                        <!--Flot Line Chart placeholder-->
                                        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                                        <div id="demo-sales-statistics" style="height:150px"></div>
                                        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="panel">
                                    <div class="panel-heading">
                                        <h3 class="panel-title"> Earning Statistics </h3>
                                    </div>
                                    <div class="panel-body">
                                        <!--Flot Line Chart placeholder-->
                                        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                                        <div id="demo-earning-statistics" style="height:150px"></div>
                                        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="panel">
                                    <div class="panel-heading">
                                        <h3 class="panel-title">Order List</h3>
                                    </div>
                                    <div class="panel-body">
                                        <!--Default Tabs (Left Aligned)--> 
                                        <!--===================================================-->
                                        <div class="tab-base mar-no">
                                            <!--Nav Tabs-->
                                            <ul class="nav nav-tabs">
                                                <li class="active"> <a data-toggle="tab" href="dashboard-v3.html#demo-lft-tab-1"> Top Selling </a> </li>
                                                <li> <a data-toggle="tab" href="dashboard-v3.html#demo-lft-tab-2">Most Viewed</a> </li>
                                                <li> <a data-toggle="tab" href="dashboard-v3.html#demo-lft-tab-3">Recent Orders</a> </li>
                                            </ul>
                                            <!--Tabs Content-->
                                            <div class="tab-content">
                                                <div id="demo-lft-tab-1" class="tab-pane fade active in">
                                                    <!--Hover Rows--> 
                                                    <!--===================================================-->
                                                    <table class="table table-hover table-vcenter">
                                                        <thead>
                                                            <tr>
                                                                <th>#</th>
                                                                <th>Project</th>
                                                                <th>Project Deadline</th>
                                                                <th>Status</th>
                                                                <th>Clients</th>
                                                                <th class="hidden-xs">Progress</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            <tr>
                                                                <td>1</td>
                                                                <td>IT Help Desk</td>
                                                                <td>11 May 2016</td>
                                                                <td>
                                                                    <div class="label label-table label-info">Block</div>
                                                                </td>
                                                                <td>Semantha Armstrong</td>
                                                                <td class="hidden-xs">
                                                                    <div class="progress progress-striped progress-sm">
                                                                        <div class="progress-bar progress-bar-primary" style="width: 25%;"></div>
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td>2</td>
                                                                <td>Product Dev</td>
                                                                <td>15 May 2016</td>
                                                                <td>
                                                                    <div class="label label-table label-danger">On Hold</div>
                                                                </td>
                                                                <td>Jonathan Smith</td>
                                                                <td class="hidden-xs">
                                                                    <div class="progress progress-striped progress-sm">
                                                                        <div class="progress-bar progress-bar-success" style="width: 35%;"></div>
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td>3</td>
                                                                <td>Website Redesign</td>
                                                                <td>19 May 2016</td>
                                                                <td>
                                                                    <div class="label label-table label-success">Approved</div>
                                                                </td>
                                                                <td>Jacob Armstrong</td>
                                                                <td class="hidden-xs">
                                                                    <div class="progress progress-striped progress-sm">
                                                                        <div class="progress-bar progress-bar-info" style="width: 85%;"></div>
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td>4</td>
                                                                <td>Local Ad</td>
                                                                <td>25 May 2016</td>
                                                                <td>
                                                                    <div class="label label-table label-warning">Pending</div>
                                                                </td>
                                                                <td>Sandra Smith</td>
                                                                <td class="hidden-xs">
                                                                    <div class="progress progress-striped progress-sm">
                                                                        <div class="progress-bar progress-bar-warning" style="width: 45%;"></div>
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td>5</td>
                                                                <td>Design new theme</td>
                                                                <td>28 May 2016</td>
                                                                <td>
                                                                    <div class="label label-table label-warning">Pending</div>
                                                                </td>
                                                                <td>Will DeBrandon</td>
                                                                <td class="hidden-xs">
                                                                    <div class="progress progress-striped progress-sm">
                                                                        <div class="progress-bar progress-bar-danger" style="width: 55%;"></div>
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td>6</td>
                                                                <td>Mockup Testing</td>
                                                                <td>31 May 2016</td>
                                                                <td>
                                                                    <div class="label label-table label-warning">Pending</div>
                                                                </td>
                                                                <td>Alexander Flynn</td>
                                                                <td class="hidden-xs">
                                                                    <div class="progress progress-striped progress-sm">
                                                                        <div class="progress-bar progress-bar-success" style="width: 75%;"></div>
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                    <!--===================================================--> 
                                                    <!--End Hover Rows--> 
                                                </div>
                                                <div id="demo-lft-tab-2" class="tab-pane fade">
                                                    <!--Hover Rows-->
                                                    <!--===================================================-->
                                                    <table class="table table-hover table-vcenter">
                                                        <thead>
                                                            <tr>
                                                                <th>Invoice</th>
                                                                <th>Name</th>
                                                                <th class="text-center">Value</th>
                                                                <th class="hidden-xs">Delivery date</th>
                                                                <th>Status</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            <tr>
                                                                <td>Order #53451</td>
                                                                <td>
                                                                    <span class="text-semibold">Desktop</span>
                                                                    <br>
                                                                    <small class="text-muted">Last 7 days : 4,234k</small>
                                                                </td>
                                                                <td class="text-center">$250</td>
                                                                <td class="hidden-xs">2012/04/25</td>
                                                                <td>
                                                                    <div class="label label-table label-info">On Process</div>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td>Order #53451</td>
                                                                <td>
                                                                    <span class="text-semibold">Laptop</span>
                                                                    <br>
                                                                    <small class="text-muted">Last 7 days : 3,876k</small>
                                                                </td>
                                                                <td class="text-center">$350</td>
                                                                <td class="hidden-xs">2012/04/25</td>
                                                                <td>
                                                                    <div class="label label-table label-danger">Cancelled</div>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td>Order #53451</td>
                                                                <td>
                                                                    <span class="text-semibold">Tablet</span>
                                                                    <br>
                                                                    <small class="text-muted">Last 7 days : 45,678k</small>
                                                                </td>
                                                                <td class="text-center">$325</td>
                                                                <td class="hidden-xs">2012/04/25</td>
                                                                <td>
                                                                    <div class="label label-table label-success">Shipped</div>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td>Order #53451</td>
                                                                <td>
                                                                    <span class="text-semibold">Smartphone</span>
                                                                    <br>
                                                                    <small class="text-muted">Last 7 days : 34,553k</small>
                                                                </td>
                                                                <td class="text-center">$250</td>
                                                                <td class="hidden-xs">2012/04/25</td>
                                                                <td>
                                                                    <div class="label label-table label-warning">Pending</div>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                                <!--===================================================-->
                                                <!--End Hover Rows-->
                                                <div id="demo-lft-tab-3" class="tab-pane fade">
                                                    <!--Hover Rows--> 
                                                    <!--===================================================-->
                                                    <table class="table table-hover table-vcenter">
                                                        <thead>
                                                            <tr>
                                                                <th>&nbsp;</th>
                                                                <th>User ID</th>
                                                                <th>Date</th>
                                                                <th>Amount</th>
                                                                <th>Status</th>
                                                                <th class="hidden-xs">Download</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            <tr>
                                                                <td>
                                                                    <div class="checkbox">
                                                                        <label class="form-checkbox form-icon active">
                                                                        <input type="checkbox">
                                                                        </label>
                                                                    </div>
                                                                </td>
                                                                <td> Semantha Armstrong </td>
                                                                <td>3 Jan, 2013</td>
                                                                <td>$239.85</td>
                                                                <td>
                                                                    <div class="label label-table label-info">Block</div>
                                                                </td>
                                                                <td class="hidden-xs">
                                                                    <!--Split Buttons Dropdown--> 
                                                                    <!--===================================================-->
                                                                    <div class="btn-group btn-group-xs">
                                                                        <button class="btn btn-danger">Download</button>
                                                                        <button class="btn btn-danger dropdown-toggle dropdown-toggle-icon" data-toggle="dropdown" type="button"> 
                                                                        <i class="dropdown-caret fa fa-caret-down"></i> 
                                                                        </button>
                                                                        <ul class="dropdown-menu">
                                                                            <li><a href="dashboard-v3.html#">Action</a> </li>
                                                                            <li><a href="dashboard-v3.html#">Another action</a> </li>
                                                                            <li><a href="dashboard-v3.html#">Something else here</a> </li>
                                                                            <li class="divider"></li>
                                                                            <li><a href="dashboard-v3.html#">Separated link</a> </li>
                                                                        </ul>
                                                                    </div>
                                                                    <!--===================================================-->
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td>
                                                                    <div class="checkbox">
                                                                        <label class="form-checkbox form-icon active">
                                                                        <input type="checkbox">
                                                                        </label>
                                                                    </div>
                                                                </td>
                                                                <td> Jonathan Smith </td>
                                                                <td>3 Jan, 2013</td>
                                                                <td>$239.85</td>
                                                                <td>
                                                                    <div class="label label-table label-danger">On Hold</div>
                                                                </td>
                                                                <td class="hidden-xs">
                                                                    <!--Split Buttons Dropdown--> 
                                                                    <!--===================================================-->
                                                                    <div class="btn-group btn-group-xs">
                                                                        <button class="btn btn-danger">Download</button>
                                                                        <button class="btn btn-danger dropdown-toggle dropdown-toggle-icon" data-toggle="dropdown" type="button"> 
                                                                        <i class="dropdown-caret fa fa-caret-down"></i> 
                                                                        </button>
                                                                        <ul class="dropdown-menu">
                                                                            <li><a href="dashboard-v3.html#">Action</a> </li>
                                                                            <li><a href="dashboard-v3.html#">Another action</a> </li>
                                                                            <li><a href="dashboard-v3.html#">Something else here</a> </li>
                                                                            <li class="divider"></li>
                                                                            <li><a href="dashboard-v3.html#">Separated link</a> </li>
                                                                        </ul>
                                                                    </div>
                                                                    <!--===================================================-->
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td>
                                                                    <div class="checkbox">
                                                                        <label class="form-checkbox form-icon active">
                                                                        <input type="checkbox">
                                                                        </label>
                                                                    </div>
                                                                </td>
                                                                <td> Jacob Armstrong </td>
                                                                <td>3 Jan, 2013</td>
                                                                <td>$1395.85</td>
                                                                <td>
                                                                    <div class="label label-table label-success">Approved</div>
                                                                </td>
                                                                <td class="hidden-xs">
                                                                    <!--Split Buttons Dropdown--> 
                                                                    <!--===================================================-->
                                                                    <div class="btn-group btn-group-xs">
                                                                        <button class="btn btn-danger">Download</button>
                                                                        <button class="btn btn-danger dropdown-toggle dropdown-toggle-icon" data-toggle="dropdown" type="button"> 
                                                                        <i class="dropdown-caret fa fa-caret-down"></i> 
                                                                        </button>
                                                                        <ul class="dropdown-menu">
                                                                            <li><a href="dashboard-v3.html#">Action</a> </li>
                                                                            <li><a href="dashboard-v3.html#">Another action</a> </li>
                                                                            <li><a href="dashboard-v3.html#">Something else here</a> </li>
                                                                            <li class="divider"></li>
                                                                            <li><a href="dashboard-v3.html#">Separated link</a> </li>
                                                                        </ul>
                                                                    </div>
                                                                    <!--===================================================-->
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td>
                                                                    <div class="checkbox">
                                                                        <label class="form-checkbox form-icon active">
                                                                        <input type="checkbox">
                                                                        </label>
                                                                    </div>
                                                                </td>
                                                                <td> Sandra Smith </td>
                                                                <td>3 Jan, 2013</td>
                                                                <td>$125.85</td>
                                                                <td>
                                                                    <div class="label label-table label-warning">Pending</div>
                                                                </td>
                                                                <td class="hidden-xs">
                                                                    <!--Split Buttons Dropdown--> 
                                                                    <!--===================================================-->
                                                                    <div class="btn-group btn-group-xs">
                                                                        <button class="btn btn-danger">Download</button>
                                                                        <button class="btn btn-danger dropdown-toggle dropdown-toggle-icon" data-toggle="dropdown" type="button"> 
                                                                        <i class="dropdown-caret fa fa-caret-down"></i> 
                                                                        </button>
                                                                        <ul class="dropdown-menu">
                                                                            <li><a href="dashboard-v3.html#">Action</a> </li>
                                                                            <li><a href="dashboard-v3.html#">Another action</a> </li>
                                                                            <li><a href="dashboard-v3.html#">Something else here</a> </li>
                                                                            <li class="divider"></li>
                                                                            <li><a href="dashboard-v3.html#">Separated link</a> </li>
                                                                        </ul>
                                                                    </div>
                                                                    <!--===================================================-->
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td>
                                                                    <div class="checkbox">
                                                                        <label class="form-checkbox form-icon active">
                                                                        <input type="checkbox">
                                                                        </label>
                                                                    </div>
                                                                </td>
                                                                <td> Sandra </td>
                                                                <td>3 Jan, 2013</td>
                                                                <td>$239.85</td>
                                                                <td>
                                                                    <div class="label label-table label-warning">Pending</div>
                                                                </td>
                                                                <td class="hidden-xs">
                                                                    <!--Split Buttons Dropdown--> 
                                                                    <!--===================================================-->
                                                                    <div class="btn-group btn-group-xs">
                                                                        <button class="btn btn-danger">Download</button>
                                                                        <button class="btn btn-danger dropdown-toggle dropdown-toggle-icon" data-toggle="dropdown" type="button"> 
                                                                        <i class="dropdown-caret fa fa-caret-down"></i> 
                                                                        </button>
                                                                        <ul class="dropdown-menu">
                                                                            <li><a href="dashboard-v3.html#">Action</a> </li>
                                                                            <li><a href="dashboard-v3.html#">Another action</a> </li>
                                                                            <li><a href="dashboard-v3.html#">Something else here</a> </li>
                                                                            <li class="divider"></li>
                                                                            <li><a href="dashboard-v3.html#">Separated link</a> </li>
                                                                        </ul>
                                                                    </div>
                                                                    <!--===================================================-->
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                    <!--===================================================--> 
                                                    <!--End Hover Rows--> 
                                                </div>
                                            </div>
                                        </div>
                                        <!--===================================================--> 
                                        <!--End Default Tabs (Left Aligned)--> 
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="panel">
                                    <div class="panel-heading">
                                        <h3 class="panel-title">User Accounts</h3>
                                    </div>
                                    <div class="panel-body">
                                        <!--Hover Rows--> 
                                        <!--===================================================-->
                                        <table class="table table-hover table-vcenter">
                                            <thead>
                                                <tr>
                                                    <th>&nbsp;</th>
                                                    <th>Profile</th>
                                                    <th>User ID</th>
                                                    <th class="hidden-xs">Email Address</th>
                                                    <th>Status</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>
                                                        <div class="checkbox">
                                                            <label class="form-checkbox form-icon active">
                                                            <input type="checkbox">
                                                            </label>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="media-object center"> <img src="img/av1.png" alt="" class="img-rounded img-sm"> </div>
                                                    </td>
                                                    <td> Semantha Armstrong </td>
                                                    <td class="hidden-xs">semantha@gmail.com</td>
                                                    <td>
                                                        <div class="label label-table label-info">Block</div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <div class="checkbox">
                                                            <label class="form-checkbox form-icon active">
                                                            <input type="checkbox">
                                                            </label>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="media-object center"> <img src="img/av1.png" alt="" class="img-rounded img-sm"> </div>
                                                    </td>
                                                    <td> Jonathan Smith </td>
                                                    <td class="hidden-xs">jonathan@gmail.com</td>
                                                    <td>
                                                        <div class="label label-table label-danger">On Hold</div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <div class="checkbox">
                                                            <label class="form-checkbox form-icon active">
                                                            <input type="checkbox">
                                                            </label>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="media-object center"> <img src="img/av1.png" alt="" class="img-rounded img-sm"> </div>
                                                    </td>
                                                    <td> Jacob Armstrong </td>
                                                    <td class="hidden-xs">jacob@gmail.com</td>
                                                    <td>
                                                        <div class="label label-table label-success">Approved</div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <div class="checkbox">
                                                            <label class="form-checkbox form-icon active">
                                                            <input type="checkbox">
                                                            </label>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="media-object center"> <img src="img/av1.png" alt="" class="img-rounded img-sm"> </div>
                                                    </td>
                                                    <td> Sandra Smith </td>
                                                    <td class="hidden-xs">Sandra@gmail.com</td>
                                                    <td>
                                                        <div class="label label-table label-warning">Pending</div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <div class="checkbox">
                                                            <label class="form-checkbox form-icon active">
                                                            <input type="checkbox">
                                                            </label>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="media-object center"> <img src="img/av1.png" alt="" class="img-rounded img-sm"> </div>
                                                    </td>
                                                    <td> Sandra </td>
                                                    <td class="hidden-xs">Sandra@gmail.com</td>
                                                    <td>
                                                        <div class="label label-table label-warning">Pending</div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <!--===================================================--> 
                                        <!--End Hover Rows--> 
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-3">
                                <div class="panel">
                                    <div class="panel-heading">
                                        <h3 class="panel-title"><span class="count-todos"></span> Items Left</h3>
                                    </div>
                                    <div class="panel-body pad-no">
                                        <div class="todolist not-done">
                                            <ul id="sortable" class="list-unstyled">
                                                <li class="ui-state-default">
                                                    <div class="checkbox">
                                                        <label class="form-checkbox form-icon active">
                                                        <input type="checkbox"> Option 1
                                                        </label>
                                                    </div>
                                                </li>
                                                <li class="ui-state-default">
                                                    <div class="checkbox">
                                                        <label class="form-checkbox form-icon active">
                                                        <input type="checkbox"> Option 1
                                                        </label>
                                                    </div>
                                                </li>
                                                <li class="ui-state-default">
                                                    <div class="checkbox">
                                                        <label class="form-checkbox form-icon active">
                                                        <input type="checkbox"> Option 1
                                                        </label>
                                                    </div>
                                                </li>
                                                <li class="ui-state-default">
                                                    <div class="checkbox">
                                                        <label class="form-checkbox form-icon active">
                                                        <input type="checkbox"> Option 1
                                                        </label>
                                                    </div>
                                                </li>
                                            </ul>
                                            <ul id="done-items" class="list-unstyled">
                                                <li class="ui-state-default">
                                                    Some item <a class="remove-item fa fa-remove pull-right" href="dashboard-v3.html#" role="button"></a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="panel-footer">
                                        <input type="text" class="form-control add-todo" placeholder="Enter Your TODO List ">
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <!--Profile Widget-->
                                <!--===================================================-->
                                <div class="panel">
                                    <div class="panel-body pad-no">
                                        <div class="media pad-all bg-primary">
                                            <div class="media-left">
                                                <i class="fa fa-facebook fa-5x"></i>
                                            </div>
                                            <div class="media-body">
                                                <p class="text-2x text-thin text-right">SquareDesign</p>
                                                <p class="h5 mar-no text-right">#squaredesign</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="panel-footer">
                                        <ul class="nav nav-section nav-justified">
                                            <li>
                                                <div class="section">
                                                    <div class="h4 mar-ver-5"> 12.5k </div>
                                                    <p class="mar-no">Followers</p>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="section">
                                                    <div class="h4 mar-ver-5"> 1853 </div>
                                                    <p class="mar-no">Following</p>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="section">
                                                    <div class="h4 mar-ver-5"> 3451 </div>
                                                    <p class="mar-no">Tweets</p>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <!--===================================================-->
                                <!--Profile Widget-->
                                <!--===================================================-->
                                <div class="panel">
                                    <div class="panel-body pad-no">
                                        <div class="media pad-all bg-info">
                                            <div class="media-left">
                                                <i class="fa fa-twitter fa-5x"></i>
                                            </div>
                                            <div class="media-body">
                                                <p class="text-2x text-thin text-right">SquareDesign</p>
                                                <p class="h5 mar-no text-right">@ravindra1982</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="panel-footer">
                                        <ul class="nav nav-section nav-justified">
                                            <li>
                                                <div class="section">
                                                    <div class="h4 mar-ver-5"> 12.5k </div>
                                                    <p class="mar-no">Followers</p>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="section">
                                                    <div class="h4 mar-ver-5"> 1853 </div>
                                                    <p class="mar-no">Following</p>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="section">
                                                    <div class="h4 mar-ver-5"> 3451 </div>
                                                    <p class="mar-no">Tweets</p>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <!--===================================================-->
                            </div>
                            <div class="col-lg-6">
                                <div class="panel">
                                    <div class="panel-heading">
                                        <h3 class="panel-title">Monthly Statistics <small> based on the User Activities </small></h3>
                                    </div>
                                    <div class="panel-body pad-no">
                                        <!--Default Accordion--> 
                                        <!--===================================================-->
                                        <div class="panel-group accordion mar-no" id="statistics">
                                            <div class="panel defaultpanel">
                                                <!--Accordion title-->
                                                <div class="panel-heading">
                                                    <h4 class="panel-title"> 
                                                        <a data-parent="#statistics" data-toggle="collapse" href="dashboard-v3.html#statisticsone"> 
                                                        <i class="fa fa-calendar"></i> Top Countries 
                                                        </a> 
                                                    </h4>
                                                </div>
                                                <!--Accordion content-->
                                                <div class="panel-collapse collapse in" id="statisticsone">
                                                    <div class="panel-body pad-no">
                                                        <table class="table mar-no bg-light-gray">
                                                            <thead>
                                                                <tr>
                                                                    <th>Country</th>
                                                                    <th>Unique User</th>
                                                                    <th>Pageviews</th>
                                                                    <th>Changes</th>
                                                                    <th>New Vs. Return</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <tr>
                                                                    <td>USA</td>
                                                                    <td>254152</td>
                                                                    <td>635241</td>
                                                                    <td>25%</td>
                                                                    <td>
                                                                        <div class="progress progress-striped progress-md">
                                                                            <div style="width: 75%" class="progress-bar progress-bar-success">
                                                                                <span class="sr-only">75% Complete (success)</span>
                                                                            </div>
                                                                            <div style="width: 25%" class="progress-bar progress-bar-info">
                                                                                <span class="sr-only">25% Complete (warning)</span>
                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>India</td>
                                                                    <td>325614</td>
                                                                    <td>524152</td>
                                                                    <td>20%</td>
                                                                    <td>
                                                                        <div class="progress progress-striped progress-md">
                                                                            <div style="width: 45%" class="progress-bar progress-bar-success">
                                                                                <span class="sr-only">45% Complete (success)</span>
                                                                            </div>
                                                                            <div style="width: 55%" class="progress-bar progress-bar-info">
                                                                                <span class="sr-only">55% Complete (warning)</span>
                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>United kingdom</td>
                                                                    <td>124563</td>
                                                                    <td>654525</td>
                                                                    <td>35%</td>
                                                                    <td>
                                                                        <div class="progress progress-striped progress-md">
                                                                            <div style="width: 25%" class="progress-bar progress-bar-success">
                                                                                <span class="sr-only">25% Complete (success)</span>
                                                                            </div>
                                                                            <div style="width: 75%" class="progress-bar progress-bar-info">
                                                                                <span class="sr-only">75% Complete (warning)</span>
                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Brazil</td>
                                                                    <td>325412</td>
                                                                    <td>456985</td>
                                                                    <td>35%</td>
                                                                    <td>
                                                                        <div class="progress progress-striped progress-md">
                                                                            <div style="width: 35%" class="progress-bar progress-bar-success">
                                                                                <span class="sr-only">35% Complete (success)</span>
                                                                            </div>
                                                                            <div style="width: 65%" class="progress-bar progress-bar-info">
                                                                                <span class="sr-only">65% Complete (warning)</span>
                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Canada</td>
                                                                    <td>124523</td>
                                                                    <td>490936</td>
                                                                    <td>40%</td>
                                                                    <td>
                                                                        <div class="progress progress-striped progress-md">
                                                                            <div style="width: 55%" class="progress-bar progress-bar-success">
                                                                                <span class="sr-only">55% Complete (success)</span>
                                                                            </div>
                                                                            <div style="width: 45%" class="progress-bar progress-bar-info">
                                                                                <span class="sr-only">45% Complete (warning)</span>
                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="panel defaultpanel">
                                                <!--Accordion title-->
                                                <div class="panel-heading">
                                                    <h4 class="panel-title"> 
                                                        <a data-parent="#statistics" data-toggle="collapse" href="dashboard-v3.html#statisticsTwo"> 
                                                        <i class="fa fa-calendar"></i> Age Group </a> 
                                                    </h4>
                                                </div>
                                                <!--Accordion content-->
                                                <div class="panel-collapse collapse" id="statisticsTwo">
                                                    <div class="panel-body pad-no">
                                                        <table class="table mar-no bg-light-gray">
                                                            <thead>
                                                                <tr>
                                                                    <th class="text-center">Gender</th>
                                                                    <th>Unique User</th>
                                                                    <th>Percentage</th>
                                                                    <th class="text-center">Changes</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <tr>
                                                                    <td class="text-center text-azure"><i class="fa fa-male"></i></td>
                                                                    <td>18 to 25 year old</td>
                                                                    <td class="center">25%</td>
                                                                    <td class="text-center"><i class="fa fa-caret-up text-success fa-2x"></i></td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="text-center text-azure"><i class="fa fa-male"></i></td>
                                                                    <td>26 to 35 year old</td>
                                                                    <td class="center">35%</td>
                                                                    <td class="text-center"><i class="fa fa-caret-down text-danger fa-2x"></i></td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="text-center text-azure"><i class="fa fa-male"></i></td>
                                                                    <td>36 to 45 year old</td>
                                                                    <td class="center">45%</td>
                                                                    <td class="text-center"><i class="fa fa-caret-up text-success fa-2x"></i></td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="text-center text-azure"><i class="fa fa-male"></i></td>
                                                                    <td>46 to 55 year old</td>
                                                                    <td class="center">40%</td>
                                                                    <td class="text-center"><i class="fa fa-caret-up text-success fa-2x"></i></td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--===================================================--> 
                                        <!--End Default Accordion--> 
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--===================================================-->
                    <!--End page content-->
                </div>
                <!--===================================================-->
                <!--END CONTENT CONTAINER-->
                <!--MAIN NAVIGATION-->
                <!--===================================================-->
                <nav id="mainnav-container">
                    <div id="mainnav">
                        <!--Menu-->
                        <!--================================-->
                        <div id="mainnav-menu-wrap">
                            <div class="nano">
                                <div class="nano-content">
                                    <ul id="mainnav-menu" class="list-group">
                                        <!--Category name-->
                                        <li class="list-header">Navigation</li>
                                        <!--Menu list item-->
                                        <li>
                                            <a href="javascript:void(0)">
                                            <i class="fa fa-home"></i>
                                            <span class="menu-title">Dashboard</span>
                                            <i class="arrow"></i>
                                            </a>
                                            <!--Submenu-->
                                            <ul class="collapse">
                                                <li><a href="index.html"><i class="fa fa-caret-right"></i> Homepage V1</a></li>
                                                <li><a href="dashboard-v2.html"><i class="fa fa-caret-right"></i> Homepage V2</a></li>
                                                <li><a href="dashboard-v3.html"><i class="fa fa-caret-right"></i> Homepage V3</a></li>
                                            </ul>
                                        </li>
                                        <!--Category name-->
                                        <li class="list-header">Components</li>
                                        <!--Menu list item-->
                                        <li>
                                            <a href="dashboard-v3.html#">
                                            <i class="fa fa-briefcase"></i>
                                            <span class="menu-title">UI Elements</span>
                                            <i class="arrow"></i>
                                            </a>
                                            <!--Submenu-->
                                            <ul class="collapse">
                                                <li><a href="ui-animation.html"><i class="fa fa-caret-right"></i> CSS3 Animation </a></li>
                                                <li><a href="ui-panel.html"><i class="fa fa-caret-right"></i> Panel </a></li>
                                                <li><a href="ui-xeditable.html"><i class="fa fa-caret-right"></i> Xeditable </a></li>
                                                <li><a href="ui-button.html"><i class="fa fa-caret-right"></i> Buttons </a></li>
                                                <li><a href="ui-fontawesome.html"><i class="fa fa-caret-right"></i> Fontawesome </a></li>
                                                <li><a href="ui-icons.html"><i class="fa fa-caret-right"></i> Icons </a></li>
                                                <li><a href="ui-components.html"><i class="fa fa-caret-right"></i> Components </a></li>
                                                <li><a href="ui-timeline.html"><i class="fa fa-caret-right"></i> Timeline </a></li>
                                                <li><a href="ui-nested-lists.html"><i class="fa fa-caret-right"></i> Nested Lists </a></li>
                                                <li><a href="ui-grids.html"><i class="fa fa-caret-right"></i> Grids </a></li>
                                                <li><a href="ui-tab.html"><i class="fa fa-caret-right"></i> Tab </a></li>
                                                <li><a href="ui-accordions.html"><i class="fa fa-caret-right"></i> Accordions </a></li>
                                                <li><a href="ui-dragdrop.html"><i class="fa fa-caret-right"></i> Draggable Panel</a></li>
                                                <li><a href="ui-typography.html"><i class="fa fa-caret-right"></i> Typography </a></li>
                                            </ul>
                                        </li>
                                        <!--Menu list item-->
                                        <li>
                                            <a href="dashboard-v3.html#">
                                            <i class="fa fa-file"></i>
                                            <span class="menu-title">Pages</span>
                                            <i class="arrow"></i>
                                            </a>
                                            <!--Submenu-->
                                            <ul class="collapse">
                                                <li><a href="pages-faq.html"><i class="fa fa-caret-right"></i> FAQ </a></li>
                                                <li><a href="pages-gallery.html"><i class="fa fa-caret-right"></i> Gallery </a></li>
                                                <li><a href="pages-directory.html"><i class="fa fa-caret-right"></i> Directory </a></li>
                                                <li><a href="pages-profile.html"><i class="fa fa-caret-right"></i> User Profile </a></li>
                                                <li><a href="pages-invoice.html"><i class="fa fa-caret-right"></i> Invoice </a></li>
                                                <li><a href="pages-login.html"><i class="fa fa-caret-right"></i> Login </a></li>
                                                <li><a href="pages-register.html"><i class="fa fa-caret-right"></i> Register </a></li>
                                                <li><a href="pages-password-reminder.html"><i class="fa fa-caret-right"></i> Password Reminder </a></li>
                                                <li><a href="pages-lock-screen.html"><i class="fa fa-caret-right"></i> Lock Screen </a></li>
                                                <li><a href="pages-404.html"><i class="fa fa-caret-right"></i> 404 Error </a></li>
                                                <li><a href="pages-500.html"><i class="fa fa-caret-right"></i> 500 Error </a></li>
                                            </ul>
                                        </li>
                                        <!--Menu list item-->
                                        <li>
                                            <a href="dashboard-v3.html#">
                                            <i class="fa fa-table"></i>
                                            <span class="menu-title">Tables</span>
                                            <i class="arrow"></i>
                                            </a>
                                            <!--Submenu-->
                                            <ul class="collapse">
                                                <li><a href="table-static.html"><i class="fa fa-caret-right"></i> Static Table <span class="label label-info pull-right">New</span></a></li>
                                                <li><a href="table-datatable.html"><i class="fa fa-caret-right"></i> Datatable Table </a></li>
                                                <li><a href="table-footable.html"><i class="fa fa-caret-right"></i> Footable Table </a></li>
                                            </ul>
                                        </li>
                                        <!--Menu list item-->
                                        <li>
                                            <a href="dashboard-v3.html#">
                                            <i class="fa fa-edit"></i>
                                            <span class="menu-title">Forms</span>
                                            <i class="arrow"></i>
                                            </a>
                                            <!--Submenu-->
                                            <ul class="collapse">
                                                <li><a href="forms-layout.html"><i class="fa fa-caret-right"></i> Form Layout </a></li>
                                                <li><a href="forms-switchery.html"><i class="fa fa-caret-right"></i> Form Switchery </a></li>
                                                <li><a href="forms-components.html"><i class="fa fa-caret-right"></i> Form Components </a></li>
                                                <li><a href="forms-validation.html"><i class="fa fa-caret-right"></i> Form Validation </a></li>
                                                <li><a href="forms-wizard.html"><i class="fa fa-caret-right"></i> Form Wizard </a></li>
                                            </ul>
                                        </li>
                                        <!--Menu list item-->
                                        <li>
                                            <a href="dashboard-v3.html#">
                                            <i class="fa fa-line-chart"></i>
                                            <span class="menu-title">Charts</span>
                                            <i class="arrow"></i>
                                            </a>
                                            <!--Submenu-->
                                            <ul class="collapse">
                                                <li><a href="charts-flot.html"><i class="fa fa-caret-right"></i> Flot Chart </a></li>
                                                <li><a href="charts-morris.html"><i class="fa fa-caret-right"></i> Morris Chart </a></li>
                                            </ul>
                                        </li>
                                        <li class="list-divider"></li>
                                        <!--Category name-->
                                        <li class="list-header">Extra</li>
                                        <!--Menu list item-->
                                        <li>
                                            <a href="calendar.html">
                                            <i class="fa fa-calendar"></i>
                                            <span class="menu-title">
                                            Calendar
                                            </span>
                                            </a>
                                        </li>
                                        <!--Menu list item-->
                                        <li>
                                            <a href="ui-widgets.html">
                                            <i class="fa fa-flask"></i>
                                            <span class="menu-title">
                                               Widgets
                                            <span class="label label-pink pull-right">New</span>
                                            </span>
                                            </a>
                                        </li>
                                        <!--Menu list item-->
                                        <li>
                                            <a href="dashboard-v3.html#">
                                            <i class="fa fa-envelope-o"></i>
                                            <span class="menu-title">Mail</span>
                                            <i class="arrow"></i>
                                            </a>
                                            <!--Submenu-->
                                            <ul class="collapse">
                                                <li><a href="mail-inbox.html"><i class="fa fa-caret-right"></i> Inbox </a></li>
                                                <li><a href="mail-compose.html"><i class="fa fa-caret-right"></i> Compose </a></li>
                                                <li><a href="mail-mailview.html"><i class="fa fa-caret-right"></i> Mail View </a></li>
                                            </ul>
                                        </li>
                                        <!--Menu list item-->
                                        <li>
                                            <a href="dashboard-v3.html#">
                                            <i class="fa fa-map-marker"></i>
                                            <span class="menu-title">
                                            Maps
                                            <span class="label label-mint pull-right">New</span>
                                            </span>
                                            </a>
                                            <!--Submenu-->
                                            <ul class="collapse">
                                                <li><a href="maps-gmap.html">Google Maps</a></li>
                                                <li><a href="maps-vectormap.html">Vector Maps</a></li>
                                            </ul>
                                        </li>
                                        <!--Menu list item-->
                                        <li>
                                            <a href="dashboard-v3.html#">
                                            <i class="fa fa-plus-square"></i>
                                            <span class="menu-title">Menu Level</span>
                                            <i class="arrow"></i>
                                            </a>
                                            <!--Submenu-->
                                            <ul class="collapse">
                                                <li><a href="dashboard-v3.html#"><i class="fa fa-caret-right"></i> Second Level Item</a></li>
                                                <li><a href="dashboard-v3.html#"><i class="fa fa-caret-right"></i> Second Level Item</a></li>
                                                <li><a href="dashboard-v3.html#"><i class="fa fa-caret-right"></i> Second Level Item</a></li>
                                                <li class="list-divider"></li>
                                                <li>
                                                    <a href="dashboard-v3.html#">Third Level<i class="arrow"></i></a>
                                                    <!--Submenu-->
                                                    <ul class="collapse">
                                                        <li><a href="dashboard-v3.html#"><i class="fa fa-caret-right"></i> Third Level Item</a></li>
                                                        <li><a href="dashboard-v3.html#"><i class="fa fa-caret-right"></i> Third Level Item</a></li>
                                                        <li><a href="dashboard-v3.html#"><i class="fa fa-caret-right"></i> Third Level Item</a></li>
                                                        <li><a href="dashboard-v3.html#"><i class="fa fa-caret-right"></i> Third Level Item</a></li>
                                                    </ul>
                                                </li>
                                                <li>
                                                    <a href="dashboard-v3.html#">Third Level<i class="arrow"></i></a>
                                                    <!--Submenu-->
                                                    <ul class="collapse">
                                                        <li><a href="dashboard-v3.html#"><i class="fa fa-caret-right"></i> Third Level Item</a></li>
                                                        <li><a href="dashboard-v3.html#"><i class="fa fa-caret-right"></i> Third Level Item</a></li>
                                                        <li><a href="dashboard-v3.html#"><i class="fa fa-caret-right"></i> Third Level Item</a></li>
                                                        <li class="list-divider"></li>
                                                        <li><a href="dashboard-v3.html#"><i class="fa fa-caret-right"></i> Third Level Item</a></li>
                                                        <li><a href="dashboard-v3.html#"><i class="fa fa-caret-right"></i> Third Level Item</a></li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                    <!--Widget-->
                                    <!--================================-->
                                    <div class="mainnav-widget">
                                        <!-- Show the button on collapsed navigation -->
                                        <div class="show-small">
                                            <a href="dashboard-v3.html#" data-toggle="menu-widget" data-target="#demo-wg-server">
                                            <i class="fa fa-desktop"></i>
                                            </a>
                                        </div>
                                        <!-- Hide the content on collapsed navigation -->
                                        <div id="demo-wg-server" class="hide-small mainnav-widget-content">
                                            <ul class="list-group">
                                                <li class="list-header pad-no pad-ver">Server Status</li>
                                                <li class="mar-btm">
                                                    <span class="label label-primary pull-right">15%</span>
                                                    <p>CPU Usage</p>
                                                    <div class="progress progress-sm">
                                                        <div class="progress-bar progress-bar-primary" style="width: 15%;">
                                                            <span class="sr-only">15%</span>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="mar-btm">
                                                    <span class="label label-purple pull-right">75%</span>
                                                    <p>Bandwidth</p>
                                                    <div class="progress progress-sm">
                                                        <div class="progress-bar progress-bar-purple" style="width: 75%;">
                                                            <span class="sr-only">75%</span>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <!--================================-->
                                    <!--End widget-->
                                </div>
                            </div>
                        </div>
                        <!--================================-->
                        <!--End menu-->
                    </div>
                </nav>
                <!--===================================================-->
                <!--END MAIN NAVIGATION-->
                <!--ASIDE--> 
                <!--===================================================-->
                <aside id="aside-container">
                    <div id="aside">
                        <div class="nano closed">
                            <div class="nano-content">
                                <div class="fade in active">
                                    <h4 class="pad-hor text-thin"> Online Members (7) </h4>
                                    <ul class="list-group bg-trans">
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av1.png" alt="" class="img-sm"> <i class="on bottom text-light"></i> </div>
                                                <div class="inline-block">
                                                    <div class="text-small">John Knight</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av2.png" alt="" class="img-sm"> <i class="on bottom text-light"></i> </div>
                                                <div class="inline-block pad-ver-5">
                                                    <div class="text-small">Jose Knight</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av3.png" alt="" class="img-sm"> <i class="on bottom text-light"></i> </div>
                                                <div class="inline-block">
                                                    <div class="text-small">Roy Banks</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av7.png" alt="" class="img-sm"> <i class="on bottom text-light"></i> </div>
                                                <div class="inline-block">
                                                    <div class="text-small">Steven Jordan</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av4.png" alt="" class="img-sm"> <i class="on bottom text-light"></i> </div>
                                                <div class="inline-block">
                                                    <div class="text-small">Scott Owens</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av5.png" alt="" class="img-sm"> <i class="on bottom text-light"></i> </div>
                                                <div class="inline-block">
                                                    <div class="text-small">Melissa Hunt</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av1.png" alt="" class="img-sm"> <i class="busy bottom text-light"></i> </div>
                                                <div class="inline-block">
                                                    <div class="text-small">John Knight</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av2.png" alt="" class="img-sm"> <i class="busy bottom text-light"></i> </div>
                                                <div class="inline-block">
                                                    <div class="text-small">Jose Knight</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av3.png" alt="" class="img-sm"> <i class="busy bottom text-light"></i> </div>
                                                <div class="inline-block">
                                                    <div class="text-small">Roy Banks</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av7.png" alt="" class="img-sm"> <i class="busy bottom text-light"></i> </div>
                                                <div class="inline-block">
                                                    <div class="text-small">Steven Jordan</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av1.png" alt="" class="img-sm"> <i class="off bottom text-light"></i> </div>
                                                <div class="inline-block pad-ver-5">
                                                    <div class="text-small">John Knight</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av2.png" alt="" class="img-sm"> <i class="off bottom text-light"></i> </div>
                                                <div class="inline-block pad-ver-5">
                                                    <div class="text-small">Jose Knight</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av3.png" alt="" class="img-sm"> <i class="off bottom text-light"></i> </div>
                                                <div class="inline-block pad-ver-5">
                                                    <div class="text-small">Roy Banks</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av7.png" alt="" class="img-sm"> <i class="off bottom text-light"></i> </div>
                                                <div class="inline-block">
                                                    <div class="text-small">Steven Jordan</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </aside>
                <!--===================================================--> 
                <!--END ASIDE-->
                <!--RIGHT CHAT MESSANGER--> 
                <!--===================================================-->
                <aside class="conversation closed">
                    <div class="nano">
                        <div class="nano-content">
                            <div class="media">
                                <div class="media-left"> <a href="javascript:void(0)" class="conversation-toggle"> <i class="fa fa-angle-left"></i></a> </div>
                                <div class="media-body text-center">
                                    <h4 class="media-heading">John smith</h4>
                                    <p class="text-sm">Online</p>
                                </div>
                            </div>
                            <div class="chat-window">
                                <form class="form">
                                    <div class="floating-label">
                                        <textarea id="sidebarChatMessage" placeholder="Leave a message" rows="2" class="form-control autosize" name="sidebarChatMessage"></textarea>
                                        <label for="sidebarChatMessage"></label>
                                    </div>
                                </form>
                                <div class="msg_container_base">
                                    <div class="msg_container base_sent">
                                        <div class="col-md-9 col-xs-9">
                                            <div class="messages msg_sent">
                                                <p>that mongodb thing looks good, huh? </p>
                                                <time datetime="2009-11-13T20:00">Timothy • 51 min</time>
                                            </div>
                                        </div>
                                        <div class="col-md-3 col-xs-3 avatar"> <img src="img/av1.png" alt=""> </div>
                                    </div>
                                    <div class="msg_container">
                                        <div class="col-md-3 col-xs-3 avatar"> <img src="img/av2.png" alt=""> </div>
                                        <div class="col-md-9 col-xs-9">
                                            <div class="messages msg_receive">
                                                <p>that mongodb thing looks good, huh? </p>
                                                <time datetime="2009-11-13T20:00">Timothy • 51 min</time>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="msg_container">
                                        <div class="col-md-3 col-xs-3 avatar"> <img src="img/av2.png" alt=""> </div>
                                        <div class="col-xs-9 col-md-9">
                                            <div class="messages msg_receive">
                                                <p>that mongodb thing looks good, huh? </p>
                                                <time datetime="2009-11-13T20:00">Timothy • 51 min</time>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="msg_container base_sent">
                                        <div class="col-xs-9 col-md-9">
                                            <div class="messages msg_sent">
                                                <p>that mongodb thing looks good, huh? </p>
                                                <time datetime="2009-11-13T20:00">Timothy • 51 min</time>
                                            </div>
                                        </div>
                                        <div class="col-md-3 col-xs-3 avatar"> <img src="img/av1.png" alt=""> </div>
                                    </div>
                                    <div class="msg_container">
                                        <div class="col-md-3 col-xs-3 avatar"> <img src="img/av2.png" alt=""> </div>
                                        <div class="col-xs-9 col-md-9">
                                            <div class="messages msg_receive">
                                                <p>that mongodb thing looks good, huh?</p>
                                                <time datetime="2009-11-13T20:00">Timothy • 51 min</time>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </aside>
                <!--END RIGHT CHAT MESSANGER--> 
                <!--===================================================-->
            </div>
            <!-- FOOTER -->
            <!--===================================================-->
            <footer id="footer">
                <!-- Visible when footer positions are fixed -->
                <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                <div class="show-fixed pull-right">
                    <ul class="footer-list list-inline">
                        <li>
                            <p class="text-sm">SEO Proggres</p>
                            <div class="progress progress-sm progress-light-base">
                                <div style="width: 80%" class="progress-bar progress-bar-danger"></div>
                            </div>
                        </li>
                        <li>
                            <p class="text-sm">Online Tutorial</p>
                            <div class="progress progress-sm progress-light-base">
                                <div style="width: 80%" class="progress-bar progress-bar-primary"></div>
                            </div>
                        </li>
                        <li>
                            <button class="btn btn-sm btn-dark btn-active-success">Checkout</button>
                        </li>
                    </ul>
                </div>
                <!-- Visible when footer positions are static -->
                <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                <div class="hide-fixed pull-right pad-rgt">Currently v2.2</div>
                <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                <!-- Remove the class name "show-fixed" and "hide-fixed" to make the content always appears. -->
                <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                <p class="pad-lft">&#0169; 2015 Your Company</p>
            </footer>
            <!--===================================================-->
            <!-- END FOOTER -->
            <!-- SCROLL TOP BUTTON -->
            <!--===================================================-->
            <button id="scroll-top" class="btn"><i class="fa fa-chevron-up"></i></button>
            <!--===================================================-->
        </div>
        <!--===================================================-->
        <!-- END OF CONTAINER -->
        <!--JAVASCRIPT-->
        <!--=================================================-->
        <!--jQuery [ REQUIRED ]-->
        <script src="js/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
        <!--BootstrapJS [ RECOMMENDED ]-->
        <script src="js/bootstrap.min.js"></script>
        <!--Fast Click [ OPTIONAL ]-->
        <script src="plugins/fast-click/fastclick.min.js"></script>
        <!--Jquery Nano Scroller js [ REQUIRED ]-->
        <script src="plugins/nanoscrollerjs/jquery.nanoscroller.min.js"></script>
        <!--Metismenu js [ REQUIRED ]-->
        <script src="plugins/metismenu/metismenu.min.js"></script>
        <!--Jasmine Admin [ RECOMMENDED ]-->
        <script src="js/scripts.js"></script>
        <!--Switchery [ OPTIONAL ]-->
        <script src="plugins/switchery/switchery.min.js"></script>
        <!--Jquery Steps [ OPTIONAL ]-->
        <script src="plugins/parsley/parsley.min.js"></script>
        <!--Jquery Steps [ OPTIONAL ]-->
        <script src="plugins/jquery-steps/jquery-steps.min.js"></script>
        <!--Bootstrap Select [ OPTIONAL ]-->
        <script src="plugins/bootstrap-select/bootstrap-select.min.js"></script>
        <!--Bootstrap Wizard [ OPTIONAL ]-->
        <script src="plugins/bootstrap-wizard/jquery.bootstrap.wizard.min.js"></script>
        <!--Masked Input [ OPTIONAL ]-->
        <script src="plugins/masked-input/bootstrap-inputmask.min.js"></script>
        <!--Bootstrap Validator [ OPTIONAL ]-->
        <script src="plugins/bootstrap-validator/bootstrapValidator.min.js"></script>
        <!--jvectormap [ OPTIONAL ]-->
        <script src="plugins/jvectormap/jquery-jvectormap.min.js"></script>
        <script src="plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
        <!--Flot Chart [ OPTIONAL ]-->
        <script src="plugins/flot-charts/jquery.flot.min.js"></script>
        <script src="plugins/flot-charts/jquery.flot.resize.min.js"></script>
        <!--Flot Order Bars Chart [ OPTIONAL ]-->
        <script src="plugins/flot-charts/jquery.flot.categories.js"></script>
        <!--Fullscreen jQuery [ OPTIONAL ]-->
        <script src="plugins/screenfull/screenfull.js"></script>
        <!--Form Wizard [ SAMPLE ]-->
        <script src="js/demo/dashboard-v3.js"></script>
        <!--Form Wizard [ SAMPLE ]-->
        <script src="js/demo/wizard.js"></script>
    </body>
</html>